<template>
  <mt-header title="">
    <template slot="left">
      <div class="sq-header-left">
        <img src="../assets/nav_back.png" class="sq-header-nav-back" @click="goBack"/>
        <img src="../assets/nav_logo.png" class="sq-header-nav-logo" @click="gotoIndexPage"/>
      </div>
    </template>

    <div slot="right">
      <mt-navbar :value="selected">
        <mt-tab-item id="1" @click.native="gotoIndexPage" v-bind:class="[selected=='1' ? 'is-selected' : '']">推荐</mt-tab-item>
        <mt-tab-item id="2" @click.native="gotoHomePage" v-if="islogin" v-bind:class="[selected=='2' ? 'is-selected' : '']">我的</mt-tab-item>
        <mt-tab-item id="2" @click.native="toggleLoginBox" v-else v-bind:class="[selected=='2' ? 'is-selected' : '']">登录</mt-tab-item>
      </mt-navbar>
    </div>
  </mt-header>
</template>

<script>
import Vue from 'vue';
import { mapActions, mapGetters } from 'vuex';
import { Header, Navbar, TabItem, Button} from 'mint-ui';
Vue.component(Header.name, Header);
Vue.component(Button.name, Button);
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);

export default {
  name: 'sq-header',
  props: {
    selected: {
      type: Number,
      default: 0,
      required: true
    },
    backMode: {
      type: Number,
      default: 0,
    }
  },
  data () {
    return {
    }
  },
  methods: {
    goBack() {
      if(this.backMode == 0) {
        this.$router.go(-1);
      }
    },
    gotoIndexPage() {
      this.$router.push({ name: 'Index'});
    },
    gotoHomePage() {
      this.$router.push({ name: 'Me'});
    },
    ...mapActions([
      'toggleLoginBox' // 映射 this.toggleLoginBox() 为 this.$store.dispatch('toggleLoginBox')
    ])
  },
  computed: {
    ...mapGetters([
      'islogin'
    ])
  }
}
</script>

<!-- custom mint-ui -->
<style>

  header.mint-header {
    background-color: #fff;
    color: #000;
    height: 50px;
    border-bottom: 1px solid #cccccc;
    padding: 0 12px;
  }

  header .mint-header-title {
    display:none;
  }
  header .is-left {
    flex:1;
  }
  header .is-right {
    flex:1;
  }
  header .mint-tab-item-label {
    font-size: 18px;
  }
  header .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 2px solid #3385ff;
    color: #3385ff;
    margin-bottom: 0px;
  }
  header .mint-navbar .mint-tab-item {
    padding: 14px 0px;
  }

  .sq-header-left {
    display: flex;
    align-items: center;
  }

  .sq-header-nav-back {
    width: 8px;
    height: 14px;
    padding-right: 14px;
  }

  .sq-header-nav-logo {
    width: 104.5px;
    height: 25px;
  }

</style>

